<template>
  <view class="dutyList">
    <view class="header">
     {{userinfo.nick_name+'的值班'}}
    </view>
    <view class="middle">
        <view class="sign-middle">
            <uni-calendar
            swiperHigh="540rpx"
            @created="createdCalendar"
            :tomorrow="false"
            :dateList="dateList"
            :isShowYear="false"
            :mode="1"
            :isClock="false"
            :defaultDate="newStr"
          ></uni-calendar>
        </view>
    </view>
    <view class="dutyBox" v-if="dutyArr.length">
     <view class="dutyBox_header" @click="isExpand=!isExpand">
        <view>{{`值班天数(${dutyArr.length}天)`}}</view>
        <view>
          <image :src="isExpand?'/static/images/repairFitting/bottom.png':
          '/static/images/repairFitting/up.png'" mode="" />
        </view>
     </view>
     <view class="dutyBox_main" v-if="isExpand" >
      <view v-for="(item) in dutyArr" :key="item.id">
        {{ `${dateStr(item.signDate)} (星期${weekStr[item.week]}) 1天` }}
      </view>
     </view>
    </view>
  </view>
</template>

<script>
import UniCalendar from '../../components/uni-calendar/uni-calendar.vue';
import {
	getSiginInfo,
} from '@/apis/system.js';
import { mapState } from 'vuex';

export default {
	props:{
		dutyMonth:{
			type:String,
			
		},
		active:{
			type:[String,Number],
			default:-1
		}
	},
	components:{
		UniCalendar
	},
	data() {
		return {
			currentMonth:'',
			currentYear:'',
			dateList:[],
			dutyArr:[],
			weekStr:['','一','二','三','四','五','六','日'],
			isExpand:true,
			defaultDate:new Date().getTime()
			
		};
	},

	computed:{
		...mapState('user', ['userinfo']),
		newStr() {
			console.log(this.dutyMonth,new Date(this.dutyMonth).getTime(),'ccccc');
			let timeTemp = '';
			if (this.dutyMonth) {
				timeTemp = new Date(this.dutyMonth).getTime();
			} else {
				timeTemp = new Date().getTime();
			}
			return timeTemp;
		}
	},
	methods:{
		createdCalendar(res) {
			this.currentMonth = res.month;
			this.currentYear = res.year;
			this.handSiginInfo(this.currentMonth);
		},
		chooseDay() {},
		dateStr(date) {
			let indexFifth = 3; 
			let indexSixth = 5;
			return  [
				...String(date).slice(0, indexFifth + 1),
				'-',
				...String(date).slice(indexFifth + 1, indexSixth + 1),
				'-',
				...String(date).slice(indexSixth + 1)
			].join('');
		},
		handSiginInfo(month) {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			getSiginInfo({
				month,
				searchYear:this.currentYear
			}).then((res) => {
				if (res.code == 200) {
					this.dateList = res.data.list;
					this.dutyArr = res.data.list.filter(e=>{
						return e.holiday == 2;
					});
					uni.hideLoading();
					console.log(this.dutyArr ,666);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.dutyList{
    padding: 0 20rpx ;
    .header{
        margin-bottom: 32rpx;
        height: 100rpx;
        width: 100%;
        background: #fff;
        border-bottom: 2rpx solid #EEEEEE;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #333;
        
    }
    .dutyBox{
        padding-top: 50rpx;
        .dutyBox_header{
            display: flex;
            justify-content: space-between;
            margin-bottom: 28rpx;
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
            image{
              width: 32rpx;
              height: 32rpx;
            }
        }
        .dutyBox_main{
			padding-bottom: 120rpx;
            view{
            display: flex;
             padding: 24rpx 20rpx;
             color: #3D3D3D;
             font-size: 28rpx;
             border-top: 2rpx solid #EEEEEE;;
            }
        }
    }
}
</style>